<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    table{
      border: 1px solid gray;
      border-collapse: collapse;
    }
    thead tr{
      background-color: royalblue;
      color: white;
    }
    th,td{
      border: 1px solid gray;
      padding: 10px;
    }
    tbody tr{
      background-color: turquoise;
    }
    tbody tr:hover{
      background-color: yellowgreen;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <input type="button" value="点击获取数据" id='btn'>
  <table>
    <thead>
      <tr>
        <th>标题</th>
        <th>地址</th>
        <th>说明</th>
      </tr>
    </thead>
    <tbody>

    </tbody>
  </table>
  <script src="../jquery-1.12.4.min.js"></script>
  <script>
    var datas = [
      {
        name:'传智博客',
        url:'http://www.itcast.cn',
        type:'IT最强培训机构',
      },
      {
        name:'淘宝网',
        url:'http://www.taobao.com',
        type:'最大的电商平台',
      },
      {
        name:'京东',
        url:'http://www.jd.cn',
        type:'有自己的物流的电商平台',
      },
      {
        name:'百度',
        url:'http://www.baidu.com',
        type:'什么都可以问的网站',
      },
      {
        name:'腾讯',
        url:'http://www.qq.com',
        type:'一只企鹅的logo',
      },
    ]
    //1 点击按钮
    $('#btn').click(function(){
      var str = '';
      //方式一
      // $.each(datas,function(i,ele){
      //   str += '<tr>';
      //     str += '<td>'+ele.name+'</td>'
      //     str += '<td>'+ele.url+'</td>'     
      //     str += '<td>'+ele.type+'</td>'       
      //   str += '</tr>';
      // });
      //方式二
      // $.each(datas,function(i,ele){
      //   str += '<tr>';
      //     $.each(ele,function(key,value){
      //       str += '<td>'+value+'</td>'
      //       console.log(key)
      //     })
      //   str += '</tr>';
      // });
      //方式三
      $.each(datas,function(i,ele){
        str +=  
          '<tr>\
            <td>'+ele.name+'</td>\
            <td><a href="'+ele.url+'">'+ele.url+'</a></td>\
            <td>'+ele.type+'</td>\
          </tr>'
      });
      $('tbody').html(str);
    });
  </script>
</body>
</html>